<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>index</title>
    <script type="text/javascript" th:src="@{/js/jquery.js}"></script>
    <link rel="stylesheet" th:href="@{/css/comon0.css}">
    <link rel="stylesheet" th:href="@{/css/tag-cloud.css}">
</head>
<script>
    $(window).load(function(){
        $(".loading").fadeOut()
    })

    /****/
    $(document).ready(function(){
        var whei=$(window).width()
        $("html").css({fontSize:whei/20})
        $(window).resize(function(){
            var whei=$(window).width()
            $("html").css({fontSize:whei/20})
        });
    });
    //性别指标开始
    $(function () {
        $.ajax({
            type: "POST",
            url: "/memberSex",
            success: function(data){
                let  sexData = [];
                $.each(data,function (index, json) {
                    let memberSex = "未知";
                    if (json['memberSex']==1){
                        memberSex = "男性"
                    } else if (json['memberSex'] == 2) {
                        memberSex = "女性"
                    }
                    sexData.push({value:json['sexCount'],name:memberSex})
                });
                memberSex(sexData);
            }
        });
    });
    function memberSex(msg) {
        // 性别分布
        console.log(msg)
        var myChart = echarts.init(document.getElementById('user-gender'));

        option = {
            title: [{
                text: '性别',
                left: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize:'16'
                }

            }],
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                position:function(p){   //其中p为当前鼠标的位置
                    return [p[0] + 10, p[1] - 10];
                }
            },
            legend: {

                top:'70%',
                itemWidth: 10,
                itemHeight: 10,
                data:['未知','男性','女性'],
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                    fontSize:'12',
                }
            },
            series: [
                {
                    name:'用户性别',
                    type:'pie',
                    center: ['50%', '42%'],
                    radius: ['40%', '60%'],
                    color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],
                    label: {show:false},
                    labelLine: {show:false},
                    data:msg
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
    //性别指标结束

    //渠道指标开始
    $(function () {
        $.ajax({
            type: "POST",
            url: "/memberRegChannel",
            success: function(data){
                let  channel = [];
                $.each(data,function (index, json) {
                    let memberChannel = "";
                    if (json['memberChannel']==1){
                        memberChannel = "IOS"
                    } else if (json['memberChannel'] == 2) {
                        memberChannel = "Android"
                    }else if (json['memberChannel'] == 3) {
                        memberChannel = "微信小程序"
                    }else if (json['memberChannel'] == 4) {
                        memberChannel = "微信公众号"
                    }else if (json['memberChannel'] == 5) {
                        memberChannel = "H5"
                    }
                    channel.push({value:json['channelCount'],name:memberChannel})
                });
                memberRegChannel(channel);
            }
        });
    });
    function memberRegChannel(msg) {
        // 渠道
        var myChart = echarts.init(document.getElementById('user-channel'));
        option = {

            title: [{
                text: '渠道',
                left: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize:'16'
                }

            }],
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                position:function(p){   //其中p为当前鼠标的位置
                    return [p[0] + 10, p[1] - 10];
                }
            },
            legend: {

                top:'70%',
                itemWidth: 10,
                itemHeight: 10,
                data:['IOS','Android','微信小程序','微信公众号','H5'],
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                    fontSize:'12',
                }
            },
            series: [
                {
                    name:'接入渠道',
                    type:'pie',
                    center: ['50%', '42%'],
                    radius: ['40%', '60%'],
                    color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],
                    label: {show:false},
                    labelLine: {show:false},
                    data:msg
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
    //渠道指标结束

    //热度指标开始
    $(function () {
        $.ajax({
            type: "POST",
            url: "/memberHeat",
            success: function(data){
                let  heat = [];
                    heat.push({value:data['reg'],name:"已注册"});
                    heat.push({value:data['complete'],name:"已完善"});
                    heat.push({value:data['order'],name:"已下单"});
                    heat.push({value:data['orderAgain'],name:"已复购"});
                    heat.push({value:data['coupon'],name:"已储值"});
                memberHeat(heat);
            }
        });
    });
    function memberHeat(msg) {
        // 热度
        var myChart = echarts.init(document.getElementById('user-hot'));
        option = {
            title: [{
                text: '热度',
                left: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize:'16'
                }

            }],
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                position:function(p){   //其中p为当前鼠标的位置
                    return [p[0] + 10, p[1] - 10];
                }
            },
            legend: {
                top:'70%',
                itemWidth: 10,
                itemHeight: 10,
                data:['已注册','已下单','已领券','已复购','已完善'],
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                    fontSize:'12',
                }
            },
            series: [
                {
                    name:'热度属性',
                    type:'pie',
                    center: ['50%', '42%'],
                    radius: ['40%', '60%'],
                    color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],
                    label: {show:false},
                    labelLine: {show:false},
                    data:[
                        {value:335, name:'已注册'},
                        {value:310, name:'已下单'},
                        {value:234, name:'已领券'},
                        {value:234, name:'已复购'},
                        {value:135, name:'已完善'},
                    ]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
    //热度指标结束

    //是否关注
    $(function () {
        $.ajax({
            type: "POST",
            url: "/memberMpSub",
            success: function(data){
                let  sub = [];
                $.each(data,function (index, json) {
                    sub.push({value:json['subCount'],name:"已关注"});
                    sub.push({value:json['unSubCount'],name:"未关注"});
                })

                memberMpSub(sub);
            }
        });
    });
    function memberMpSub(msg) {
        // 性别分布
        var myChart = echarts.init(document.getElementById('user-reg-channel'));
        option = {
            title: [{
                text: '关注',
                left: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize:'16'
                }

            }],
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                position:function(p){   //其中p为当前鼠标的位置
                    return [p[0] + 10, p[1] - 10];
                }
            },
            legend: {

                top:'70%',
                itemWidth: 10,
                itemHeight: 10,
                data:['已关注','未关注'],
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                    fontSize:'12',
                }
            },
            series: [
                {
                    name:'关注微信公众号',
                    type:'pie',
                    center: ['50%', '42%'],
                    radius: ['40%', '60%'],
                    color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],
                    label: {show:false},
                    labelLine: {show:false},
                    data:msg/*[
                        {value:335, name:'已关注'},
                        {value:310, name:'未关注'},
                    ]*/
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
    //是否关注结束

    //GMV开始
    $(function () {
        $.ajax({
            type: "POST",
            url: "/lineVos",
            success: function(data){
                let  regCount = [];
                let  memberCount = [];
                let  orderCount = [];
                let  gmv = [];
                for (let i = data.length - 8; i < data.length - 1; i++) {
                    regCount.push(data[i]['regCount']*10);
                    memberCount.push(data[i]['memberCount']);
                    orderCount.push(data[i]['orderCount']);
                    gmv.push(data[i]['gmv']/100);
                }
                lineVos(regCount,memberCount,orderCount,gmv);
            }
        });
    });
    function lineVos(regCount,memberCount,orderCount,gmv) {
        // GMV
        var myChart = echarts.init(document.getElementById('echart1'));
        option = {
            //  backgroundColor: '#00265f',
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['新用户','总用户','订单','GMV'],
                axisLabel:  {
                    interval: 0,
                    // rotate:50,
                    show: true,
                    splitNumber: 15
                },
                textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: '12',
                },
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一','周二','周三','周四','周五','周六','周日'],
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },

                axisTick: {
                    show: false,
                },
                axisLabel:  {
                    interval: 0,
                    // rotate:50,
                    show: true,
                    splitNumber: 15,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    //formatter: '{value} %'
                    show:true,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1	)",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                    }
                }
            },
            series: [
                {
                    name:'新用户',
                    type:'line',
                    stack: '总量',
                    data:regCount
                },
                {
                    name:'总用户',
                    type:'line',
                    stack: '总量',
                    data:memberCount
                },
                {
                    name:'订单',
                    type:'line',
                    stack: '总量',
                    data:orderCount
                },
                {
                    name:'GMV',
                    type:'line',
                    stack: '总量',
                    data:gmv
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
    //GMV结束

    //周注册量开始
    $(function () {
        $.ajax({
            type: "POST",
            url: "/regCountNum",
            success: function(data){
               let regData = [];
               regData.push(['时间', '当期', '上期'])
                for (let i = data.length - 8; i < data.length - 1; i++) {
                    if ((data.length-i-1)==1){
                        regData.push(['近一天',data[i]['regCount'],data[i-7]['regCount']]);
                    }else if((data.length-i)==2){
                        regData.push(['近二天',data[i]['regCount'],data[i-7]['regCount']]);
                    }else if((data.length-i)==3){
                        regData.push(['近三天',data[i]['regCount'],data[i-7]['regCount']]);
                    }else if((data.length-i)==4){
                        regData.push(['近四天',data[i]['regCount'],data[i-7]['regCount']]);
                    }else if((data.length-i)==5){
                        regData.push(['近五天',data[i]['regCount'],data[i-7]['regCount']]);
                    }else if((data.length-i)==6){
                        regData.push(['近六天',data[i]['regCount'],data[i-7]['regCount']]);
                    }else if((data.length-i)==7){
                        regData.push(['近七天',data[i]['regCount'],data[i-7]['regCount']]);
                    }

                }
                regCountNum(regData);
            }
        });
    });
    function regCountNum(msg) {
        // 周注册量
        var myChart = echarts.init(document.getElementById('echart2'));

        option = {
            grid: {
                left: '0%',
                top:'10px',
                right: '0%',
                bottom: '4%',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'shadow'}
            },
            dataset: {
                source: msg
            },
            xAxis: {
                type: 'category',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },

                axisTick: {
                    show: false,
                },
                axisLabel:  {
                    interval: 0,
                    // rotate:50,
                    show: true,
                    splitNumber: 15,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12'
                    }
                },
            },
            yAxis: {
                axisLabel: {
                    //formatter: '{value} %'
                    show:true,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1	)",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                    }
                }
            },
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [
                {type: 'bar'},
                {type: 'bar'}
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
    //周注册量结束


    //周下单量开始
    $(function () {
        $.ajax({
            type: "POST",
            url: "/orderCount",
            success: function(data){
                let orderData = [];
                orderData.push(['时间', '当期', '上期'])
                for (let i = data.length - 8; i < data.length - 1; i++) {
                    if ((data.length-i-1)==1){
                        orderData.push(['近一天',data[i]['orderCount'],data[i-7]['orderCount']]);
                    }else if((data.length-i)==2){
                        orderData.push(['近二天',data[i]['orderCount'],data[i-7]['orderCount']]);
                    }else if((data.length-i)==3){
                        orderData.push(['近三天',data[i]['orderCount'],data[i-7]['orderCount']]);
                    }else if((data.length-i)==4){
                        orderData.push(['近四天',data[i]['orderCount'],data[i-7]['orderCount']]);
                    }else if((data.length-i)==5){
                        orderData.push(['近五天',data[i]['orderCount'],data[i-7]['orderCount']]);
                    }else if((data.length-i)==6){
                        orderData.push(['近六天',data[i]['orderCount'],data[i-7]['orderCount']]);
                    }else if((data.length-i)==7){
                        orderData.push(['近七天',data[i]['orderCount'],data[i-7]['orderCount']]);
                    }

                }
                orderCount(orderData);
            }
        });
    });
    function orderCount(msg) {
        // 周下单量
        var myChart = echarts.init(document.getElementById('echart5'));

        option = {
            grid: {
                left: '0%',
                top:'10px',
                right: '0%',
                bottom: '4%',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'shadow'}
            },
            dataset: {
                source: msg
            },
            xAxis: {
                type: 'category',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },

                axisTick: {
                    show: false,
                },
                axisLabel:  {
                    interval: 0,
                    // rotate:50,
                    show: true,
                    splitNumber: 15,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12'
                    }
                },
            },
            yAxis: {
                axisLabel: {
                    //formatter: '{value} %'
                    show:true,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1	)",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                    }
                }
            },
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [
                {type: 'bar'},
                {type: 'bar'}
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }

    //周下单量结束

    //首单免费提醒开始
    /*    [
        {value:335, name:'前一天'},
        {value:310, name:'前两天'},
        {value:234, name:'前三天'},
        {value:234, name:'前四天'},
        {value:234, name:'前五天'},
        {value:234, name:'前六天'},
        {value:135, name:'前七天'}
    ]*/
    $(function () {
        $.ajax({
            type: "POST",
            url: "/freeReminderList",
            success: function(data){
                let freeRemindData = [];
                for (let i = data.length - 1; i >= data.length-7; i--) {
                    if ((data.length-i)==1) {
                        freeRemindData.push({value:data[i]['freeCount'],name:"前一天"});
                    }else if ((data.length-i)==2){
                        freeRemindData.push({value:data[i]['freeCount'],name:"前二天"});
                    }else if ((data.length-i)==3){
                        freeRemindData.push({value:data[i]['freeCount'],name:"前三天"});
                    }else if ((data.length-i)==4){
                        freeRemindData.push({value:data[i]['freeCount'],name:"前四天"});
                    }else if ((data.length-i)==5){
                        freeRemindData.push({value:data[i]['freeCount'],name:"前五天"});
                    }else if ((data.length-i)==6){
                        freeRemindData.push({value:data[i]['freeCount'],name:"前六天"});
                    }else if ((data.length-i)==7){
                        freeRemindData.push({value:data[i]['freeCount'],name:"前七天"});
                    }
                }
             freeReminderList(freeRemindData);
            }
        });
    });
    function freeReminderList(msg) {
        // 首单免费提醒
        var myChart = echarts.init(document.getElementById('new-user-coupon'));
        option = {

            title: [{
                text: '首单免费提醒',
                left: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize:'16'
                }

            }],
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                position:function(p){   //其中p为当前鼠标的位置
                    return [p[0] + 10, p[1] - 10];
                }
            },
            legend: {

                top:'70%',
                itemWidth: 10,
                itemHeight: 10,
                data:['前一天','前二天','前三天','前四天','前五天','前六天','前七天'],
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                    fontSize:'12',
                }
            },
            series: [
                {
                    name:'消费属性',
                    type:'pie',
                    center: ['50%', '42%'],
                    radius: ['40%', '60%'],
                    color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],
                    label: {show:false},
                    labelLine: {show:false},
                    data:msg
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
    //首单免费提醒结束

    //优惠卷失效提醒
    /*[
        {value:335, name:'三天后'},
        {value:310, name:'五天后'},
        {value:234, name:'七天后'},
        {value:234, name:'一天后'}
    ]*/
    $(function () {
        $.ajax({
            type: "POST",
            url: "/couponReminders",
            success: function(data){
                let couponRemindersData = [];
                for (let i = data.length - 1; i >= data.length-7; i--) {
                    if ((data.length-i)==1) {
                        couponRemindersData.push({value:data[i]['couponCount'],name:"一天后"});
                    }else if ((data.length-i)==3){
                        couponRemindersData.push({value:data[i]['couponCount'],name:"三天后"});
                    }else if ((data.length-i)==5){
                        couponRemindersData.push({value:data[i]['couponCount'],name:"五天后"});
                    }else if ((data.length-i)==7){
                        couponRemindersData.push({value:data[i]['couponCount'],name:"七天后"});
                    }
                }
                couponReminders(couponRemindersData);
            }
        });
    });
    function couponReminders(msg) {
        // 优惠券失效提醒
        var myChart = echarts.init(document.getElementById('user-coupon-invalid'));
        option = {
            title: [{
                text: '优惠券失效提醒',
                left: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize:'16'
                }

            }],
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                position:function(p){   //其中p为当前鼠标的位置
                    return [p[0] + 10, p[1] - 10];
                }
            },
            legend: {
                top:'70%',
                itemWidth: 10,
                itemHeight: 10,
                data:['三天后','五天后','七天后','一天后'],
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                    fontSize:'12',
                }
            },
            series: [
                {
                    name:'消费属性',
                    type:'pie',
                    center: ['50%', '42%'],
                    radius: ['40%', '60%'],
                    color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab','#06b4ab','#06c8ab','#06dcab','#06f0ab'],
                    label: {show:false},
                    labelLine: {show:false},
                    data:msg
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
    //优惠卷失效提醒

    //漏斗图开始
/*    [
        {value: 20, name: '储值'},
        {value: 40, name: '复购'},
        {value: 55, name: '下单'},
        {value: 70, name: '加购'},
        {value: 85, name: '点击'},
        {value: 100, name: '展现'}
    ]*/
    $(function () {
        $.ajax({
            type: "POST",
            url: "/funnel",
            success: function(data){
                let funnelData = [];
                funnelData.push({value:data['orderAgain'],name:"复购"});
                funnelData.push({value:data['chargeCoupon'],name:"储值"});
                funnelData.push({value:data['order'],name:"下单"});
                funnelData.push({value:data['addCart'],name:"加购"});
                funnelData.push({value:data['click'],name:"点击"});
                funnelData.push({value:data['present'],name:"展现"});
                funnel(funnelData);
            }
        });

    });
    function funnel(msg) {
        // 漏斗图
        var myChart = echarts.init(document.getElementById('echart4'));

        option = {
            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c}%",
                axisPointer: {
                    lineStyle: {
                        color: '#dddc6b'
                    }
                }
            },
            toolbox: {
                top:150,
                feature: {
                    dataView: {readOnly: false},
                    restore: {},
                    saveAsImage: {}
                }
            },
            legend: {
                top:'0%',
                data: ['展现', '点击', '加购', '下单', '储值', "复购"],
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                    fontSize:'12',
                }
            },
            grid: {
                left: '10',
                top: '30',
                right: '10',
                bottom: '10',
                containLabel: true
            },


            calculable: true,
            series: [
                {
                    name: '漏斗图',
                    type: 'funnel',
                    left: '15',
                    top: 40,
                    bottom: 0,
                    width: '90%',
                    min: 0,
                    max: 1000,
                    minSize: '0%',
                    maxSize: '100%',
                    sort: 'descending',
                    gap: 2,
                    label: {
                        show: true,
                        position: 'inside'
                    },
                    labelLine: {
                        length: 3,
                        lineStyle: {
                            width: 1,
                            type: 'solid'
                        }
                    },
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 0.2
                    },
                    emphasis: {
                        label: {
                            fontSize: 8
                        }
                    },
                    data: msg,
                    toolbox: {
                        feature: {
                            dataView: {readOnly: false},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                }
            ]

        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
    //漏斗图结束
</script>
<script type="text/javascript" th:src="@{/js/echarts.min.js}"></script>
<script language="JavaScript" th:src="@{/js/js.js}"></script>
<body>
<div class="canvas" style="opacity: .2">
    <iframe frameborder="0" th:src="@{/js/index.html}" style="width: 100%; height: 100%"></iframe>
</div>
<div class="loading">
    <div class="loadbox"> <img th:src="@{/picture/loading.gif}"> 页面加载中... </div>
</div>
<div class="head">
    <h1>数据营销分析平台</h1>
    <div class="weather"><!--<img src="picture/weather.png"><span>多云转小雨</span>--><span id="showTime"></span></div>

    <script>
        var t = null;
        t = setTimeout(time,1000);//開始运行
        function time()
        {
            clearTimeout(t);//清除定时器
            dt = new Date();
            var y=dt.getFullYear();
            var mt=dt.getMonth()+1;
            var day=dt.getDate();
            var h=dt.getHours();//获取时
            var m=dt.getMinutes();//获取分
            var s=dt.getSeconds();//获取秒
            document.getElementById("showTime").innerHTML = y+"年"+mt+"月"+day+"-"+h+"时"+m+"分"+s+"秒";
            t = setTimeout(time,1000); //设定定时器，循环运行
        }

    </script>
</div>
<div class="mainbox">
    <ul class="clearfix">
        <li>
            <div class="boxall" style="height: 3.2rem">
                <div class="alltitle">增长</div>
                <div class="allnav" id="echart1"></div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 3.2rem">
                <div class="alltitle">周注册量</div>
                <div class="allnav" id="echart2"></div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 3.2rem">
                <div style="height:100%; width: 100%;">
                    <div class="sy" id="user-gender"></div>
                    <div class="sy" id="user-channel"></div>
                    <div class="sy" id="user-hot"></div>
                </div>
                <div class="boxfoot"></div>
            </div>
        </li>
        <li>
            <div class="bar">
                <div class="barbox">
                    <ul class="clearfix">
                        <li class="pulll_left counter">125811</li>
                        <li class="pulll_left counter">391241</li>
                    </ul>
                </div>
                <div class="barbox2">
                    <ul class="clearfix">
                        <li class="pulll_left">2019年总收入情况 </li>
                        <li class="pulll_left">2018年总支出情况</li>
                    </ul>
                </div>
            </div>
            <div class="map">
                <div class="map1">
                    <div class="container-fluid" id="app">
                        <div class="row justify-content-center">
                            <div class="offset-3 offset-md-2"></div>
                            <div class="tag-cloud col-lg-6">
                                <div class="dadiv">
                                    <div class="tagBall">
                                        <a class="tag" href="#" v-for="(tag,index) in tagCloudList">{{tag.name}}</a>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li>
            <div class="boxall" style="height:3.4rem">
                <div class="alltitle">漏斗图</div>
                <div class="allnav" id="echart4"></div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 3.2rem">
                <div class="alltitle">周下单量</div>
                <div class="allnav" id="echart5"></div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 3rem">
                <div style="height:100%; width: 100%;">
                    <div class="sy" id="user-reg-channel"></div>
                    <div class="sy" id="new-user-coupon"></div>
                    <div class="sy" id="user-coupon-invalid"></div>
                </div>
                <div class="boxfoot"></div>
            </div>
        </li>
    </ul>
</div>
<div class="back"></div>

<script th:src="@{/js/vue.js}"></script>
<script>
    var app;
    app = new Vue({
        el: '#app',
        data: {
            tagCloudList: [],
            chartArr: []
        },
        methods: {
            getTagCloudList: function () {
                console.log("getTagCloudList");
                // todo
                var that = this;
                var arr = [{name: "男性"}, {name: "女性"}, {name: "IOS"}, {name: "Android"}, {name: "微信小程序"}
                    , {name: "微信公众号"}, {name: "H5"}, {name: "注册"}, {name: "待完善"}, {name: "已领券"}
                    , {name: "已下单"}, {name: "已复购"}, {name: "已关注"}, {name: "未关注"}, {name: "卡布奇诺"}
                    , {name: "美式"}, {name: "摩卡"}, {name: "拿铁"}, {name: "橙汁"}, {name: "石榴汁"}
                    , {name: "西瓜汁"}, {name: "芒果"}, {name: "猕猴桃"}, {name: "沙琪玛"}, {name: "面包干"}
                    , {name: "酸奶"}, {name: "火腿"}, {name: "汉堡"}, {name: "咖啡杯"}, {name: "咖啡机"}
                    , {name: "果汁机"}, {name: "咖啡物语"}, {name: "钥匙扣"}, {name: "破损、撒漏"}, {name: "错货"}
                    , {name: "缺货"}, {name: "投诉"}
                ];
                that.tagCloudList = arr;
            },
            getChartArr: function () {
                var that = this;
                that.chartArr = [5, 10, 15, 20, 25, 30];
            }
        },
        created: function () {
            this.getTagCloudList();
            this.getChartArr();
        }

    });
</script>
<script th:src="@{/js/tag-cloud.js}"></script>
<script th:src="@{/js/stats.js}"></script>
<script type="text/javascript" th:src="@{/js/china.js}"></script>
<script type="text/javascript" th:src="@{/js/area_echarts.js}"></script>
</body>
</html>
